<template>
    <div class="fulldiv" v-if="showblur">
      <img :src="styleObject" style="width:100%;height:100%;position:absolute;">
      <img :src="styleObject" style="width:100%;height:100%" v-bind:class="{ blur: showblur }">
    </div>
    <div class="fulldiv"  v-bind:style="styleObject" v-else>
    </div>
</template>
<script>
  export default {
    name: 'background',
    data () {
      return {
        showblur: true
      }
    },
    computed: {
      styleObject: function () {
        let localsetting = this.$store.state.localsetting
        if (Number(localsetting.backgroundtype) === 1) {
          this.showblur = true
          return localsetting.backgroundimg
        } else {
          this.showblur = false
          return {
            'background-color': localsetting.diycolor
          }
        }
      }
    }
  }
</script>

<style scoped>
  .fulldiv{
    width:100%;
    height:100%;
    box-sizing: border-box;
    overflow:hidden;
    position:absolute;
    z-index:-1;
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }
  .blur{    
      -webkit-filter: blur(5px);
         -moz-filter: blur(5px);
          -ms-filter: blur(5px);    
              filter: blur(5px);    
  }
</style>
